<template>
	<div id="div">
		<div class="text item" v-show="isShow">
			<!-- 筛选区域 -->
			<div class="block">
				<IocnFont iconName="icon-shaixuan" color="rgb(45,72,195)"></IocnFont>
				<span class="option">筛选</span>
				<span class="demonstration">注册时间： </span>
				<el-date-picker
					class="data"
					v-model="value2"
					type="daterange"
					unlink-panels
					range-separator="至"
					start-placeholder="Start date"
					end-placeholder="End date"
				/>
			</div>
			<!-- 搜索区域 -->
			<div class="search">
				<IocnFont iconName="icon-sousuo" color="rgb(45,72,195)"></IocnFont>
				<span class="spanSou">搜索</span>
				<el-form :model="formInline" class="demo-form-inline">
					<el-form-item label="精准搜索：">
						<el-input
							v-model="formInline.user"
							placeholder="请输入用户id或名称"
						/>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<!-- 搜索，重置，以及收起按钮 -->
		<div class="btns">
			<el-button
				type="primary"
				:icon="iconMain"
				@click="top"
				style="background: rgb(23, 28, 73)"
			>
				{{ text }}
			</el-button>
			<el-button
				type="primary"
				:icon="RefreshRight"
				@click="rewrite"
				style="background: rgb(255, 195, 6)"
			>
				重置
			</el-button>
			<el-button
				type="primary"
				:icon="Search"
				@click="reserve"
				style="background: rgb(33, 61, 192)"
			>
				搜索
			</el-button>
			<!--收起后出现搜索框 -->
			<input
				type="text"
				class="lastInput"
				placeholder="请输入用户id或名称"
				v-model="formInline.user"
				v-show="!isShow"
			/>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
// 引入阿里图标
import IocnFont from "@/components/IocnFont.vue";
// 引入页面要使用的ICON图标
import { RefreshRight, Search, Top, Bottom } from "@element-plus/icons-vue";
import useDataStore from "@/stores/user.js";
// 注册
const { tableData, reserve } = useDataStore;
const formInline = reactive({
	user: "",
	region: "",
});
const value2 = ref("");
let isShow = ref(true);
let iconMain = ref("Top");
let text = ref("收起");

/**
 *  点击收起按钮的时候，进行判断，如果v-show绑定的是显示的，就让它不显示，如果isShow、value=tru就是显示，icon图标变成展开top图标，n按钮内容是收起，如果是false，icon图标变成botton,按钮文本变成展开，就不显示时间插件中的内容
 */
const top = () => {
	isShow.value = !isShow.value;
	iconMain.value = isShow.value ? "Top" : "Bottom";
	text.value = isShow.value ? "收起" : "展开";
};
/**
 * 函数名称：reset
 * 点击重置实现将搜索框以及关联的日期选中的日期都清空恢复到初始状态
 */

// 重置函数
const rewrite = () => {
	// 点击重置将所选时间清零
	value2.value = [];
	// 将输入框里面的内容清空
	formInline.user = " ";
};
</script>

<style lang="less" scoped>
#div {
	// width: ;
	font-size: 14.002px;
	box-shadow: 0px 0px 20.002px rgb(0 0 0 / 20%);
	padding: 20.002px;
	box-sizing: border-box;
	margin: 20.002px 0;
	.text {
		.block {
			flex: 1;

			.option {
				margin-left: 6px;
				margin-right: 9.998px;
				flex: 1;
			}
			.el-input__wrapper {
				width: 300px;
			}
		}
		.search {
			display: flex;
			padding-top: 9.998px;
			margin-top: 9.998px;
			span {
				width: 33.998px;
				margin-right: 9.998px;
				margin-left: 6px;
			}
			.demo-form-inline {
				margin-top: -8.002px;
			}
		}
		.btns {
			font-weight: bold;
		}
	}
}
.lastInput {
	width: 30%;
	border-bottom: 2.002px solid black;
	text-align: center;
	margin-left: 20.002px;
}
</style>
